<template>
  <!-- 维护作业-需求号码维护页面 -->
  <div class="fillcontain">
    <el-form :model="searchParams" :rules="searchRules" ref="searchForm" label-width="100px" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="需求号码" prop="srpisno">
            <el-input clearable v-model="searchParams.srpisno" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="建档日期(YYYYMMDD)" prop="dtecrt" label-width="200px">
            <el-input clearable v-model="searchParams.dtecrt" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <el-row class="bgfff pb15">
        <el-col :span="24" class="pt5">
          <el-button type="danger" plain @click="goAdd">新增</el-button>
        </el-col>
      </el-row>
      <!-- 查询结果 -->
      <div class="table_container">
        <el-table v-loading="loading" :data=" relationtableData" highlight-current-row header-cell-class-name="table-header-class"
          style="width:100%">
          <el-table-column min-width="120" property="srpisno" label="需求号码" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="srdesc" label="需求描述" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="flag01" label="用户处理状态" align='center' show-overflow-tooltip>

            <template slot-scope="scope">
              <span>{{transformFlag01(scope.row.flag01)}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120" property="flag02" label="上线否" align='center' show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{transformFlag02(scope.row.flag02)}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" property="flag03" label="保留栏位" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="80" property="flag04" label="保留栏位" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="80" property="flag05" label="保留栏位" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="crtuser" label="建档人员" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="dtecrt" label="建档日期" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="crttime" label="建档时间" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="job_name" label="Job Number" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="user_profile" label="User Profile" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="160" property="datime" label="Date Time" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="160" fixed="right" label="操作" align='center'>
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" icon="el-icon-document"  @click.stop="viewGo(scope.row)">详情</el-button> -->
              <span class="operationIcon" @click.stop="viewGo(scope.row)">
                <el-tooltip class="item" effect="light" content="详情" placement="top">
                  <i class="el-icon-document"></i>
                </el-tooltip>
              </span>

              <!-- <el-button type="text" size="small" @click.stop="relationUpdateGo(scope.row)">修改</el-button> -->
              <span class="operationIcon ml5" @click.stop="relationUpdateGo(scope.row)">
                <el-tooltip class="item" effect="light" content="修改" placement="top">
                  <i class="el-icon-edit"></i>
                </el-tooltip>
              </span>

              <span class="operationIcon ml5" @click.stop="copyGo(scope.row)">
                <el-tooltip class="item" effect="light" content="拷贝" placement="top">
                  <i class="el-icon-document-copy"></i>
                </el-tooltip>
              </span>

              <!-- <el-button type="text" size="small" @click.stop="deleteFather(scope.row)">删除</el-button> -->
              <span class="operationIcon ml5" @click.stop="deleteFather(scope.row)">
                <el-tooltip class="item" effect="light" content="删除" placement="top">
                  <i class="el-icon-delete"></i>
                </el-tooltip>
              </span>

            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
                @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹框 修改-->
    <el-dialog :title="title_O" :visible.sync="relationDialog" v-if="relationDialog" width="60%" center>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="需求号码" prop="srpisno">
              <el-input v-model="form.srpisno" maxlength="10" show-word-limit :disabled="status!='add'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="用户处理状态" prop="flag01">
              <el-select v-model="form.flag01" placeholder="" :disabled="status=='view'">
                <el-option v-for="(item,index) in flag01Option" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="上线否" prop="flag02">
              <el-select v-model="form.flag02" placeholder="" :disabled="status=='view'">
                <el-option v-for="(item,index) in flag02Option" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="保留栏位" prop="flag03">
              <el-input v-model="form.flag03" :disabled="status=='view'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="保留栏位" prop="flag04">
              <el-input v-model="form.flag04" :disabled="status=='view'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="保留栏位" prop="flag05">
              <el-input v-model="form.flag05" :disabled="status=='view'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="status=='view'">
          <el-row>
            <el-col :span="12" class="common-box">
              <el-form-item label="建档人员">
                <el-input v-model="form.crtuser" :disabled="status=='view'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="common-box">
              <el-form-item label="建档日期">
                <el-input v-model="form.dtecrt" :disabled="status=='view'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="common-box">
              <el-form-item label="建档时间">
                <el-input v-model="form.crttime" :disabled="status=='view'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="common-box">
              <el-form-item label="Job Number">
                <el-input v-model="form.job_name" :disabled="status=='view'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="common-box">
              <el-form-item label="user Profile">
                <el-input v-model="form.user_profile" :disabled="status=='view'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="common-box">
              <el-form-item label="Date Time">
                <el-input v-model="form.datime" :disabled="status=='view'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24" class="common-box">
            <el-form-item label="需求描述" prop="srdesc">
              <el-input type="textarea" :rows="3" maxlength="256" show-word-limit v-model="form.srdesc" :disabled="status=='view'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button v-if="status!='view'" @click="save" class="Defaultbutton">保 存</el-button>
                <el-button @click="relationDialog = false">返 回</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import constant from '@/utils/constant';
  import { deleteFather, queryListForFather } from '@/api/setting/maintain/demandNumMaintenance.js';
  import request from '@/utils/axios';
  import appName from "@/api/appName";
  import validRules from "@/utils/validRules";

  export default {
    data() {
      return {
        relationDialog: false,//默认隐藏 保额累计关系维护修改弹框
        // 查询条件
        rules: {
          srpisno: [
            { required: true, message: '不能为空', trigger: 'blur' },
            { validator: validRules.isEnglishOrNumber, message: '请正确输入需求号码！', trigger: 'blur' }
          ],
          flag01: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          flag02: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          flag03: [
            { max: 1, message: '最多输入一个字符', trigger: 'blur' },
            { validator: validRules.isEnglishOrNumber, message: '保留栏位不能为汉字！', trigger: 'blur' }
          ],
          flag04: [
            { max: 1, message: '最多输入一个字符', trigger: 'blur' },
            { validator: validRules.isEnglishOrNumber, message: '保留栏位不能为汉字！', trigger: 'blur' }
          ],
          flag05: [
            { max: 1, message: '最多输入一个字符', trigger: 'blur' },
            { validator: validRules.isEnglishOrNumber, message: '保留栏位不能为汉字！', trigger: 'blur' }
          ],
          srdesc: [
            { required: true, message: '请输入需求描述！', trigger: 'change' },
            { max: 256, message: '最多输入256个字符', trigger: 'blur' },
          ],
        },
        searchParams: {
          dtecrt: '',
          srpisno: ''
        },
        searchRules: {
          dtecrt: [
            { len: 8, message: '请正确输入建档日期！', trigger: 'blur' },
            { validator: validRules.isNumber, message: '请正确输入建档日期！', trigger: 'blur' }
          ],
          srpisno: [
            { validator: validRules.isEnglishOrNumber, message: '请正确输入需求号码！', trigger: 'blur' }
          ]
        },
        relationtableData: [//数据
        ],
        loading: false,
        form: {
          srpisno: '',
          srdesc: '',
          flag01: 'A',
          flag02: 'A',
          flag03: '',
          flag04: '',
          flag05: '',
          crtuser: '',
          dtecrt: '',
          crttime: '',
          job_name: '',
          user_profile: '',
          datime: ''
        },

        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
        status: "add",
        title_O: '需求号码维护新增',
        flag01Option: [
          {
            label: 'A--修改中',
            value: 'A'
          },
          {
            label: 'C--已结案',
            value: 'C'
          }
        ],
        flag02Option: [
          {
            label: 'A--未上线',
            value: 'A'
          },
          {
            label: 'C--已上线',
            value: 'C'
          }
        ]
      }
    },
    created() {
    },
    mounted() {
      // this.getList();
    },
    methods: {
      transformFlag02(value) {
        if (value == 'A') {
          return 'A--未上线'
        }
        if (value == 'C') {
          return 'C--已上线'
        }
        return ''
      },
      transformFlag01(value) {
        if (value == 'A') {
          return 'A--修改中'
        }
        if (value == 'C') {
          return 'C--已结案'
        }
        return ''
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            if (this.status == "add") {
              request({
                url: appName.NB + '/maintain/demandNum/add',
                method: 'post',
                data: this.form
              }).then(res => {
                this.$store.dispatch('loading/CHANGE_LOADING', false)
                if (res.resultCode == constant.SUCCESS) {

                  this.relationDialog = false;
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  });
                  this.searchParams.srpisno = this.form.srpisno;
                  this.subGetList();
                }

              }).catch(err => {
                this.$store.dispatch('loading/CHANGE_LOADING', false);
              })
            }
            if (this.status == "update") {
              request({
                url: appName.NB + '/maintain/demandNum/update',
                method: 'post',
                data: this.form
              }).then(res => {
                this.$store.dispatch('loading/CHANGE_LOADING', false)
                if (res.resultCode == constant.SUCCESS) {
                  this.relationDialog = false;
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.searchParams.srpisno = this.form.srpisno;
                  this.subGetList();
                }

              }).catch(err => {
                this.$store.dispatch('loading/CHANGE_LOADING', false);
              })
            }
          }
        });

      },
      goAdd() {
        this.relationDialog = true;
        this.form.srdesc = "";
        this.form.srpisno = "";
        this.form.flag01 = "A";
        this.form.flag02 = "A";
        this.form.flag03 = "";
        this.form.flag04 = "";
        this.form.flag05 = "";


        this.form.crtuser = "";
        this.form.dtecrt = "";
        this.form.crttime = "";
        this.form.job_name = "";
        this.form.user_profile = "";
        this.form.datime = "";
        this.status = "add";
        this.title_O = '需求号码维护新增';
      },

      relationUpdateGo(row) {
        this.status = "update";
        this.title_O = '需求号码维护编辑';
        this.relationDialog = true;

        this.form.srdesc = row.srdesc;
        this.form.srpisno = row.srpisno;
        this.form.flag01 = row.flag01;
        this.form.flag02 = row.flag02;
        this.form.flag03 = row.flag03;
        this.form.flag04 = row.flag04;
        this.form.flag05 = row.flag05;

        this.form.crtuser = row.crtuser;
        this.form.dtecrt = row.dtecrt;
        this.form.crttime = row.crttime;
        this.form.job_name = row.job_name;
        this.form.user_profile = row.user_profile;
        this.form.datime = row.datime;
      },
      viewGo(row) {
        this.status = "view";
        this.title_O = '需求号码维护查看';
        this.relationDialog = true;

        this.form.srdesc = row.srdesc;
        this.form.srpisno = row.srpisno;
        this.form.flag01 = row.flag01;
        this.form.flag02 = row.flag02;
        this.form.flag03 = row.flag03;
        this.form.flag04 = row.flag04;
        this.form.flag05 = row.flag05;

        this.form.crtuser = row.crtuser;
        this.form.dtecrt = row.dtecrt;
        this.form.crttime = row.crttime;
        this.form.job_name = row.job_name;
        this.form.user_profile = row.user_profile;
        this.form.datime = row.datime;
      },
      copyGo(row) {
        this.status = 'add';
        this.title_O = '需求号码维护拷贝';
        this.relationDialog = true;

        this.form.srdesc = row.srdesc;
        this.form.srpisno = '';
        this.form.flag01 = row.flag01;
        this.form.flag02 = row.flag02;
        this.form.flag03 = row.flag03;
        this.form.flag04 = row.flag04;
        this.form.flag05 = row.flag05;

        this.form.crtuser = row.crtuser;
        this.form.dtecrt = row.dtecrt;
        this.form.crttime = row.crttime;
        this.form.job_name = '';
        this.form.user_profile = '';
        this.form.datime = row.datime;
      },

      // 查询列表
      getList() {
        this.paginations.total = 0;
        this.relationtableData = [];
        let para = {
          pageSize: this.paginations.pageSize,
          pageNumber: this.paginations.pageIndex,
          srpisno: this.searchParams.srpisno,
          dtecrt: this.searchParams.dtecrt
        }
        this.$store.dispatch('loading/CHANGE_LOADING', true)
        queryListForFather(para).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.resultCode == constant.SUCCESS) {
            if (res.data && res.data.list.length) {
              this.paginations.total = res.data.total;
              this.relationtableData = res.data.list;
            } else {
              this.$message({ message: '无符合条件资料。', type: 'error' });
            }
          }

        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch() {
        this.searchParams.dtecrt = '';
        this.searchParams.srpisno = '';
      },
      deleteFather(row) {

        this.$confirm("确认删除？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$store.dispatch('loading/CHANGE_LOADING', true)
          deleteFather(row).then(res => {
            this.$store.dispatch('loading/CHANGE_LOADING', false)
            if (res.resultCode == constant.SUCCESS) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList();
            }

          }).catch(err => {
            this.$store.dispatch('loading/CHANGE_LOADING', false);
          })
        })

      }
    },
    computed: {
      ...mapGetters(['tags']),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    }
  }

</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
  }

  .search_container {
    padding: 20px 20px 0 20px; //    border-top: 1px solid #e1e1e1;
  }

  .common-box {
    padding-bottom: 15px;
  }

  .common-lab {
    line-height: normal !important;
    text-align: right;

    .labelName {
      text-align: right;
    }
  }
</style>